<template>
  <section class="relative py-20 md:py-32 overflow-hidden">
    <div class="absolute inset-0 z-0">
      <img src="https://picsum.photos/id/1018/1920/1080" alt="宁静的山水风景" class="w-full h-full object-cover opacity-20">
      <div class="absolute inset-0 bg-gradient-to-b from-primary/10 to-secondary/10"></div>
    </div>
    <div class="container mx-auto px-4 relative z-10 text-center">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-serif font-bold mb-6 leading-tight">
        拾取生活中的<br class="md:hidden">每一束光
      </h1>
      <p class="text-[clamp(1rem,2vw,1.25rem)] max-w-2xl mx-auto mb-8 text-neutral-800">
        在平凡的日子里发现诗意，在匆忙的生活中寻找温暖。<br>
        漫步在生活的诗意里，记录每一个值得珍藏的瞬间。
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="#moments"
          class="bg-primary hover:bg-primary/90 text-white font-medium px-6 py-3 rounded-lg transition-colors"
          @click="handleNavClick">
          浏览故事
        </a>
        <a href="#about" class="bg-white hover:bg-neutral-200 font-medium px-6 py-3 rounded-lg transition-colors"
          @click="handleNavClick">
          关于这个博客
        </a>
      </div>
    </div>
  </section>
</template>

<script setup>
import { handleNavClick } from '@/utils/navigation'
</script>